<template>
  <div
    v-if="!initializing"
    class="vc-component"
    :style="visual.parseStyle(currNode.currStyle)"
  >
    <div :class="['vc-tabs', border ? 'border' : '']">
      <div
        v-if="showTabs"
        class="vc-tabs-header"
        :style="{gap: gap}"
      >
        <div
          v-for="(tabs, index) in currNode.children"
          :key="index"
          :class="['vc-tabs-header-item', currTabs.id === tabs.id ? 'active' : '']"
          :style="getStyle(tabs)"
          @click="clickTabs(tabs)"
        >{{tabs.name || '标签名'}}</div>
      </div>
      <div v-if="!loading" class="vc-tabs-body">
        <Component
          v-for="(child, index) in currTabs.children"
          :key="index"
          :is="'vc-' + child.type"
          :node="child"
          :inputParam="visual.getInputParam(child, props.inputParam)"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, inject, nextTick, onMounted, onUnmounted, ref } from 'vue';
import visual from "@/visual/js/visual";
import EventHandler from "@/visual/js/event";

const props = defineProps({
  node: Object,
  inputParam: Object
});
const initializing = ref(true);
const loading = ref(true);
const currNode = ref(props.node);
const currTabs = ref({});
const showTabs = ref(true);
const gap = ref('');
const border = ref('');
const eventHandler = new EventHandler(
  inject('eventHandler', Function, true),
  getCurrentInstance(),
  currNode.value
);

const init = async(styleId) => {
  initializing.value = true;
  loading.value = true;
  visual.initStyle(currNode.value, styleId);
  const compStyle = currNode.value.currCompStyle || {};
  showTabs.value = compStyle['showTabs'] !== false;
  gap.value = compStyle['gap'];
  border.value = compStyle['border'];

  await nextTick(() => initializing.value = false);
  await nextTick(() => loading.value = false);
};

const loadValue = async() => {
  loading.value = true;
  const dataList = (await visual.loadData(currNode.value.compData, eventHandler, getData(), currNode.value)).data || []
  if (dataList && dataList.length > 0 && dataList[0]['内容']) {
    currTabs.value = currNode.value.children.find(child => child.name === dataList[0]['内容']);
  }
  if (!currTabs.value?.id) {
    currTabs.value = currNode.value.children[0];
  }
  await nextTick(() => loading.value = false);
};

const getStyle = (data) => {
  const compStyle = currNode.value.currCompStyle || {};
  const prefix = currTabs.value.id === data.id ? 'selected.' : '';
  const styleList = compStyle[prefix + 'styleList'] || [];
  const style = visual.getConditionStyle(styleList, data);
  return style ? visual.parseStyle(style) : visual.parseFontStyle(compStyle);
};

const clickTabs = async(tabs) => {
  loading.value = true;
  currTabs.value = tabs;
  await nextTick(() => loading.value = false);
};

const changeStyle = (styleId) => {
  init(styleId);
};

const getData = () => {
  return {
    inputParam: currNode.value.inputParam
  };
};

const refresh = async() => {
  await loadValue();
};

onMounted(async() => {
  await init();
  await loadValue();
  await eventHandler.trigger('初始化事件');
});

onUnmounted(() => {
  eventHandler.unregister();
});

defineExpose({ getData, changeStyle, refresh });
</script>

<style scoped lang="scss">
.vc-tabs-header {
  display: flex;
  flex-direction: row;
}
.vc-tabs.border {
  .vc-tabs-header-item {
    padding: 20px 15px;
    border: 1px solid transparent;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-bottom: -1px;
  }
  .vc-tabs-header-item:hover {
    padding: 20px 15px;
    border: 1px solid #ccc;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }
  .vc-tabs-header-item.active {
    padding: 20px 15px;
    border: 1px solid #ccc;
    border-bottom: 1px solid white;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
  }

  .vc-tabs-body {
    padding: 10px;
    border: 1px solid #ccc;
  }
}
</style>